<template>
  <div v-if="source" class="OctopusEditor">
    <div class="Content">
      <transition name="fade">
        <fieldset>
          <legend>{{source.title}}</legend>


          <div id="mainWindow" style="width: 100%; height: 300px"></div>


        </fieldset>
      </transition>
    </div>
  </div>
  <div v-else>Octopus Framework Initialization Exception.</div>
</template>

<script>
  import * as monaco from "monaco-editor";
  // import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
  // import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
  // import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
  // import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
  // import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'


  export default {
    name: 'EditorEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,

        monacoEditor: null,
      }
    },
    created: function () {
      this.octopus.tips.debug("EditorEngine执行了created事件。");
    },
    mounted: function () {
      this.init();
      this.octopus.tips.debug("EditorEngine执行了mounted事件。");
    },
    activated: function () {
      this.load();
      this.octopus.tips.debug("EditorEngine执行了activated事件。");
    },
    deactivated: function () {
      this.octopus.tips.debug("EditorEngine执行了deactivated事件。");
    },
    destroyed: function () {
    },
    // 销毁之前把monaco的实例也销毁了，不然会多次注册
    beforeDestroy: function () {
      if (this.monacoEditor) {
        this.monacoEditor.dispose();
      }
    },
    // components: {editorWorker, jsonWorker, cssWorker, htmlWorker, tsWorker},
    computed: {
      // 可参考标准List控件。
    },
    methods: {
      init: function () {
        this.initData();
      },
      // 初始化数据
      initData: function () {
        // 建议VUE 5使用。
        // https://microsoft.github.io/monaco-editor/
        // https://blog.csdn.net/weixin_44786530/article/details/130202988

        this.source.control = this;

        // 使用 - 创建 monacoEditor 对象
        this.monacoEditor = monaco.editor.create(document.getElementById("mainWindow"), {
          theme: "vs-dark", // 主题：vs、vs-dark
          value: "", // 默认显示的值
          // value: "SELECT * FROM aaa;", // 默认显示的值
          language: "mysql",
          folding: true, // 是否折叠
          foldingHighlight: true, // 折叠等高线
          foldingStrategy: "indentation", // 折叠方式  auto | indentation
          showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
          disableLayerHinting: true, // 等宽优化
          emptySelectionClipboard: false, // 空选择剪切板
          selectionClipboard: false, // 选择剪切板
          automaticLayout: true, // 自动布局
          codeLens: false, // 代码镜头
          scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
          colorDecorators: true, // 颜色装饰器
          accessibilitySupport: "off", // 辅助功能支持  "auto" | "off" | "on"
          lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
          lineNumbersMinChars: 5, // 行号最小字符   number
          enableSplitViewResizing: false,
          readOnly: false, //是否只读  取值 true | false
        });
      },
      // 加载数据
      load: function () {

      },
      // 设置值
      setValue: function (value) {
        this.monacoEditor.setValue(value);
      },
      // 获取值
      getValue: function () {
        return this.monacoEditor.getValue();
      }
    },
    watch: {},
    // 数据源、加载后、选中后、改变后。
    props: ["source", "loaded", "checked", "changed", "clicked"]
  }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
